When a form is submitted in HTML, the browser refreshes the page by default. In Svelte, you can prevent this behavior using the event.preventDefault() method inside the event handler, or by adding the preventDefault modifier directly in the template.
In this example, the form submission is handled manually. Calling event.preventDefault() stops the browser's default behavior of reloading the page.
Here, the |preventDefault modifier is added directly to the on:submit event. This automatically prevents the default form behavior, so you don't need to manually call event.preventDefault() in the handler.
Forms in HTML reload the page by default on submission.
Use
event.preventDefault()inside your handler to stop this behavior.Alternatively, use the Svelte-specific
|preventDefaultmodifier for cleaner syntax.The modifier works with any event, not just
submit— for example,on:click|preventDefault.